<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="auto"
      :rules="rules"
    >
      <el-form-item label="日期" prop="date">
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="queryParams.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableData"
      :span-method="objectSpanMethod"
      height="calc(100vh - 240px)"
      border
      style="margin-bottom:16px;"
    >
      <el-table-column
        prop="lineName"
        label="产线名称"
        width="150px;"
      ></el-table-column>
      <el-table-column prop="capacityStatisticsDate" label="统计日期"></el-table-column>
      <el-table-column prop="producedQuantity" label="已生产数量"></el-table-column>
      <el-table-column prop="onlineQuantity" label="已上线数量"></el-table-column>
      <el-table-column prop="offlineQuantity" label="已下线数量"></el-table-column>
    </el-table>
    <div v-for="(item,index) in dataList" :key="index" :id="'myEchart'+index" style="width:100%;height:400px;margin-bottom:16px;" >
    </div>
  </div>
</template>

<script>
import { getCapacityByTime } from "@/api/mes/report/lineCapacity.js";
import * as echarts from "echarts";
export default {
  data() {
    var validateDate = (rule, value, callback) => {
      console.log(value)

      if (!value || !value.length) {
        return callback(new Error('日期不能为空'));
      }else {
        let timeStamp1 = Date.parse(value[0])
        let timeStamp2 = Date.parse(value[1])
        const time = 30*24*60*60*1000;
        if(timeStamp2 - timeStamp1 >time){
          return callback(new Error('日期范围不超过30天'));
        }else {
          callback();
        }
      }
      setTimeout(() => {
      console.log(value)
      }, 1000);
    };
    return {
      echartShowList: [],
      dataList: [],
      // 遮罩层
      loading: false,
      queryParams: {
        date: [],
      },
      tableData: [],
      year: null,
      option: {
        title: {
          text: "不齐套数",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["已生产数量", "已上线数量", "已下线数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: [],
        },
        yAxis: {
          type: "value",
          minInterval: 1,
        },
        series: [
          {
            name: "直流充电桩",
            type: "bar",
            data: [],
          },
        ],
      },
      myChart: null,
      rules: {
        date: [
          { validator: validateDate }
        ],
      }
    };
  },
  mounted(){
    // this.init()
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if(this.dataList.length){
        let len = this.dataList[0].capacityStatisticsDailyVoList.length
        if (columnIndex === 0) {
          if (rowIndex % len === 0) {
            return {
              rowspan: len,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
    init() {
      var chartDom = document.getElementById("myEchart");
      this.myChart = echarts.init(chartDom);
    },
    /** 查询生产报工记录列表 */
    getList() {
     this.$refs['queryForm'].validate(valid => {
      if(valid) {
        this.loading = true;
        this.dataList = []
        this.tableData = []
        const param = {
          startDate: this.queryParams.date[0],
          endDate: this.queryParams.date[1]
        }
        getCapacityByTime(param).then(res => {
          this.loading = false;
          console.log(res)
          let arr = res.data || []
          this.dataList = arr
          let newArr = []
          arr.forEach((item,index) => {
            let xData = []
            let yData1 = []
            let yData2 = []
            let yData3 = []
            item.capacityStatisticsDailyVoList = item.capacityStatisticsDailyVoList.map(item2 => {
              item2.lineName = item.lineName
              xData.push(item2.capacityStatisticsDate)
              yData1.push(item2.offlineQuantity)
              yData2.push(item2.onlineQuantity)
              yData3.push(item2.producedQuantity)
              return item2
            })
            newArr = newArr.concat(item.capacityStatisticsDailyVoList)
            this.$nextTick(() => {
              var chartDom = document.getElementById("myEchart"+index);
              item.myChart = echarts.init(chartDom);
              let option = JSON.parse(JSON.stringify(this.option))   
              option.title.text = item.lineName
              option.xAxis.data = xData
              const seriesData = [
                {
                  name: '已生产数量',
                  type: "bar",
                  data: yData1,
                  label: {
                      show: true, // 显示数值
                      position: 'top' // 数值显示的位置
                  }
                },
                {
                  name: '已上线数量',
                  type: "bar",
                  data: yData2,
                  label: {
                      show: true, // 显示数值
                      position: 'top' // 数值显示的位置
                  }
                },
                {
                  name: '已下线数量',
                  type: "bar",
                  data: yData3,
                  label: {
                    show: true, // 显示数值
                    position: 'top', // 数值显示的位置
                    // formatter:function(data){
                    //   if(data){
                    //     return data
                    //   }else {
                    //     return ''
                    //   }
                    // }
                  }
                },
              ]
              option.series = seriesData
              item.myChart.setOption(option)
            })
          })
          console.log(123,this.dataList)
          this.tableData = newArr
          console.log(newArr)

        }).catch(err => {
          console.log(234,err)
          this.dataList = []
          this.tableData = [];
          this.loading = false;
        })
      }
     })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
  },
};
</script>
